<template>
<div class="mask">
  <div class="deal-dialog">
    <div class="close" @click="close">
      &times;
    </div>
    <div class="deal-title">
      {{title}}
    </div>
    <div class="deal-con">
      <div class="row">
        <div class="key">
          门店：
        </div>
        <div class="val">
          {{dealObj.branch_name}}
        </div>
      </div>
      <div class="row">
        <div class="key">
          告警设备：
        </div>
        <div class="val">
          {{dealObj.alias}}
        </div>
      </div>
      <div class="row">
        <div class="key">
          告警开始时间：
        </div>
        <div class="val">
          {{format(dealObj.attime*1000, 'YYYY-MM-DD HH:mm:ss')}}
        </div>
      </div>
      <div v-if="title === '查看详情'" class="row">
        <div class="key">
          告警结束时间：
        </div>
        <div class="val">
          {{format(dealObj.last_update, 'YYYY-MM-DD HH:mm:ss')}}
        </div>
      </div>
      <div class="row">
        <div class="key">
          告警等级：
        </div>
        <div class="val">
          {{except_levels.find(item => item.key === dealObj.except_level).txt}}
        </div>
      </div>
      <div class="row">
        <div class="key">
          告警原因：
        </div>
        <div class="val">
          {{dealObj.except_reason}}
        </div>
      </div>
      <div class="row">
        <div class="key">
          建议处理方式：
        </div>
        <div class="val">
          {{dealObj.alarm_plan}}
        </div>
      </div>
      <div v-if="title === '查看详情'" class="row">
        <div class="key">
          告警解除方式：
        </div>
        <div class="val">
          {{alarmRelieve[dealObj.restore_type]}}
        </div>
      </div>
    </div>
    <div v-if="title === '处理告警'" class="dialog-foot">
      <div v-if="dealObj.rule_id != 'RULE_ID_7004'" class="dialog-foot-btn" @click="alarmProcess(1)">
        忽略此告警
      </div>
      <div v-if="dealObj.except_level != 3" class="dialog-foot-btn" @click="alarmProcess(2)">
        报修设备
      </div>
      <div v-if="dealObj.except_level === 3 && dealObj.rule_id == 'RULE_ID_7004'" class="dialog-foot-btn" @click="cleared(2)">
        已清洗完成
      </div>
    </div>
  </div>
</div>
  
    
  
</template>

<script>
import * as api from '@/api'
import { 
  format
} from 'silly-datetime'
import { mapState } from 'vuex'
import { except_levels,alarmRelieve } from '@/consts/codeMaps'

export default {
  props: {
    dealObj: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      format,
      except_levels,
      alarmRelieve
    }
  },
  watch: {
    
  },
  computed:{
    ...mapState(['alarmBx'])
  },
  methods: {
    close() {
      this.$emit('close')
    },
    // 查询告警总数
    async alarmProcess(status) {
      console.log(this.dealObj)
      const { code, total } = await api.alarmmanage.alarmProcess({
        alarm_id: this.dealObj.id,
        serial: this.dealObj.serial,
        status
      })
      if (code === 0) {
        this.close()
        const bxstate = !this.alarmBx
        this.$store.commit('setState', {
          name: 'alarmBx',
          value: bxstate
        })
      }
    },
    // 清洗记录
    async cleared(status) {
      const clean_day = z
      const dealObj = this.dealObj

      const { code, message } = await api.devdesign.addClear([{
        device_type:dealObj.device_type,
        project_id:dealObj.project_id,
        name:dealObj.alias,
        store_id:dealObj.branch_number,
        serial:dealObj.serial,
        clean_day:clean_day
      }])
      if (code === 0) {
        this.alarmProcess(status)
        const bxstate = !this.alarmBx
        this.$store.commit('setState', {
          name: 'alarmBx',
          value: bxstate
        })
      }
    }
  },
  created() {
    console.log('清洗',this.dealObj)
  }
}
</script>

<style lang="stylus">
.deal-dialog {
  width: getPx(480);
  min-height: getPx(220);
  background: $sec-bg;
  border-radius: $radius-sm;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4102;
  padding: getPx(30);
  .deal-title {
    font-size: $dialog-title-font-size;
  }
  .deal-con {
    min-height: getPx(140);  
    margin: getPx(30) 0 0 getPx(10);
    padding: getPx(10);
    .row {
      margin: getPx(10) 0 0 0;
      min-height: getPx(20);
      display: flex;
      .key {
        color: $secondary-color;
        font-size: $sm-font-size;
        min-width: getPx(124);
      }
      .val {
        min-height: getPx(20);
        font-size: $sub-font-size;
        // line-height: getPx(24);
        align-self: flex-start;
        line-height: getPx(20);
      }
    }
  }
  
}

</style>
